<template>
    <div class="card p-3 bg-white mt-3">
        <div class="card-header d-flex ai-center pb-3">
            <i :class="['iconfont', `icon-${icon}`]"></i>
            <div class="fs-xl flex-1 px-2">{{ title }}</div>
            <i class="iconfont icon-menu"></i>
        </div>
        <div class="card-body pt-3">
            <div class="nav jc-between">
                <div :class="['nav-item', currentIndex === i ? 'active' : '']" v-for="(item, i) in newsCats" :key="i">
                    <div class="nav-link" @click="$refs.list.swiper.slideTo(i)">{{item.name}}</div>
                </div>
            </div>
            <div class="pt-3">
                <swiper :options="{autoHeight: true}" ref="list" @slide-change="() => currentIndex = $refs.list.swiper.realIndex">
                    <swiper-slide v-for="(item, j) in newsCats" :key="j">
                        <slot name="items" :item="item"></slot>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Card",
        props: {
            title: {
                type: String,
                required: true
            },
            icon: {
                type: String,
                required: true
            },
            newsCats: {
                type: Array
            }
        },
        data() {
            return {
                currentIndex: 0
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/scss/var";
    .card {
        .card-header {
            border-bottom: 1px solid $border-color;
        }

        border-bottom: 1px solid $border-color;
    }
</style>
